import React, {useEffect, useState} from 'react'
import {Descriptions, Button, Card} from "antd"
import {getHosDetailRequest} from "@api/hospital/hospitalList"
import {useNavigate, useParams} from "react-router-dom";
import type {
  getHosDetailType,
} from "@api/hospital/model/hospitalListTypes"


export default function HospitalShow() {
  const navigate = useNavigate()
  const {id} = useParams()
  // console.log('id',id)
  //1.集中管理数据状态
  //设置加载中状态
  const [hosDetail,setHosDetail] = useState<getHosDetailType>({})

  useEffect(() => {
    const getHosDetail = async () => {
      const re = await getHosDetailRequest(id)
      // console.log('详细信息',re)
      setHosDetail(re)
    }
    getHosDetail()
  }, [])

  //把hosDetail的数据结构出来
  const {bookingRule,hospital} = hosDetail
  // console.log(bookingRule)
  // console.log(hospital)

  return (
    <div>
      <Card>
        <Descriptions title='基础信息' column={2} bordered>
          <Descriptions.Item label="医院名称" labelStyle={{color:'red'}}>{hospital?.hosname}</Descriptions.Item>
          <Descriptions.Item label="医院logo">{
            <img width={150} src={`data:image/jpeg;base64,${hospital?.logoData}`} alt=""/>
          }</Descriptions.Item>
          <Descriptions.Item label="医院编码">{hospital?.hoscode}</Descriptions.Item>
          <Descriptions.Item label="医院地址">{hospital?.param.fullAddress}</Descriptions.Item>
          <Descriptions.Item label="坐车路线" span={2}>{hospital?.route}</Descriptions.Item>
          <Descriptions.Item label="医院简介" span={2}>{hospital?.intro}</Descriptions.Item>
        </Descriptions>
        <Descriptions title='预约规则信息' column={2} bordered>
          <Descriptions.Item label="预约周期">{bookingRule?.cycle}</Descriptions.Item>
          <Descriptions.Item label="放号时间">{bookingRule?.releaseTime}</Descriptions.Item>
          <Descriptions.Item label="停挂时间">{bookingRule?.stopTime}</Descriptions.Item>
          <Descriptions.Item label="退号时间">{bookingRule?.quitTime}</Descriptions.Item>
          <Descriptions.Item label="预约规则" span={2}>{
            bookingRule?.rule.map((item,index) => {
              return <p key={index}>{item}</p>
            })
          }</Descriptions.Item>
        </Descriptions>
        <Button type = "primary" onClick={()=>{navigate(-1)}}>返回</Button>
      </Card>

    </div>
  )
}